﻿@page "/components/offcanvas"

<Pager Title="Offcanvas" Description="Build hidden sidebars into your project for navigation, shopping carts, and more."
Indicates="@(new[]{"Example","Placement","Scroll"})"
>
		<Demo Title="Example">
		<Description>
			Use <code>Trigger</code> and set <code>Toogle</code> and <code>Target</code> to invoke <code>Offcanvas</code> component
		</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#example-offcanvas"))">
				Offcanvas
			</Button>
			<Offcanvas id="example-offcanvas">
				Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
			</Offcanvas>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#example-offcanvas""))"">
	Offcanvas
</Button>

<Offcanvas id=""example-offcanvas"">
	Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</Offcanvas>
```
			")
		</Code>
	</Demo>
		<Demo Title="Placement">
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#placement-top-offcanvas"))">
				Top
			</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#placement-right-offcanvas"))">
				Right
			</Button>
			<Offcanvas id="placement-top-offcanvas" Placement="Placement.Top">
				<HeadContent>Offcanvas Title</HeadContent>
				<ChildContent>
				Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</ChildContent>
			</Offcanvas>
			
			<Offcanvas id="placement-right-offcanvas" Placement="Placement.Right">
				<HeadContent>Offcanvas Title</HeadContent>
				<ChildContent>
				Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</ChildContent>
			</Offcanvas>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#placement-top-offcanvas""))"">
	Top
</Button>
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#placement-right-offcanvas""))"">
	Right
</Button>

<Offcanvas id=""placement-top-offcanvas"" Placement=""Placement.Top"">
	<HeadContent>Offcanvas Title</HeadContent>
	<ChildContent>
	...
	</ChildContent>
</Offcanvas>
			
<Offcanvas id=""placement-right-offcanvas"" Placement=""Placement.Right"">
	<HeadContent>Offcanvas Title</HeadContent>
	<ChildContent>
	...
	</ChildContent>
</Offcanvas>
```
			")
		</Code>
	</Demo>
		<Demo Title="Scroll">
			<Description>
				Default <code>Backdrop</code> is <code>true</code>.
			</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#scroll-offcanvas"))">
				Scroll with backdrop
			</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#scroll-no-backdrop-offcanvas"))">
				Scroll without backdrop
			</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Offcanvas).Target("#no-backdrop-offcanvas"))">
				Unscroll without backdrop
			</Button>
			<Offcanvas id="scroll-offcanvas" Scrollable>
				<HeadContent>Scrollable</HeadContent>
				<ChildContent>
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</ChildContent>
			</Offcanvas>			
			<Offcanvas id="scroll-no-backdrop-offcanvas" Scrollable Backdrop="false">
				<HeadContent>Scrollable with backdrop</HeadContent>
				<ChildContent>
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</ChildContent>
			</Offcanvas>			
			<Offcanvas id="no-backdrop-offcanvas" Backdrop="false">
				<HeadContent>Unscrollable</HeadContent>
				<ChildContent>
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</ChildContent>
			</Offcanvas>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#scroll-offcanvas""))"">
	Scroll with backdrop
</Button>
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#scroll-no-backdrop-offcanvas""))"">
	Scroll without backdrop
</Button>
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Offcanvas).Target(""#no-backdrop-offcanvas""))"">
	Noscroll without backdrop
</Button>

<Offcanvas id=""scroll-offcanvas"" Scrollable>
	<HeadContent>Scrollable</HeadContent>
	<ChildContent>
		...
	</ChildContent>
</Offcanvas>		

<Offcanvas id=""scroll-no-backdrop-offcanvas"" Scrollable Backdrop=""false"">
	<HeadContent>Scrollable with backdrop</HeadContent>
	<ChildContent>
		...
	</ChildContent>
</Offcanvas>	

<Offcanvas id=""no-backdrop-offcanvas"" Backdrop=""false"">
	<HeadContent>Unscrollable</HeadContent>
	<ChildContent>
		...
	</ChildContent>
</Offcanvas>
```
			")
		</Code>
	</Demo>
</Pager>